import 'dart:async';

import "package:flutter/material.dart";
import 'package:flutter_pink_app/serialized/recommend.dart';
import 'package:flutter_pink_app/business/get_ranking.dart';
import 'package:flutter_pink_app/style/color.dart';
import 'package:flutter_pink_app/style/text.dart';
import "../composables/video_row.dart";

// 排行榜列表组件
class RankingList extends StatefulWidget {
  final String listType; // 排行表列表种类
  final int reqListCount; // 请求列表加载数量

  const RankingList(this.listType, {Key key, this.reqListCount = 20})
      : super(key: key);

  @override
  _RankingListState createState() => _RankingListState();
}

class _RankingListState extends State<RankingList> {
  final List<VideoInfo> _dataList = []; // 渲染数据列表
  int _currPageIndex = 1; // 当前请求页码
  bool _isRenderComplete = false; // 服务端数据是否渲染完成

  // 初始化生命周期
  @override
  void initState() {
    super.initState();
    _initRequest();
  }

  // 废弃生命周期
  @override
  void dispose() {
    print("排行列表销毁");
    super.dispose();
  }

  // 初始化请求函数
  Future<void> _initRequest() async {
    final res = await getRankingList(
        type: widget.listType,
        pageIndex: _currPageIndex,
        pageSize: widget.reqListCount); // 远程请求数据
    // 如果请求不到数据则直接返回
    if (res == null) {
      Timer(Duration(seconds: 5), _initRequest); // 5秒后发起轮询
      return;
    }
    final resList = res.list;
    // 如果页面仍挂载中且已加载数据小于总数据条数，则加入渲染数据列表
    if (mounted && resList.length > 0) {
      setState(() {
        _dataList.addAll(resList);
        _updateIndex(res.total); // 更新计数索引
      });
    }
  }

  // 计算页码更新
  void _updateIndex(int total) {
    if (total == _dataList.length) {
      _isRenderComplete = true;
      print("服务端的数据已全部加载完毕");
    }
    _currPageIndex++;
  }

  // 请求更多影像数据
  Future<void> _loadMoreVideo({bool isTopRefresh = false}) async {
    print('loadMoreVideo at ranking_list');
    final res = await getRankingList(
        pageSize: widget.reqListCount, pageIndex: _currPageIndex); // 请求16条数据
    // 请求失败则直接返回
    if (res == null) {
      return;
    }
    final resList = res.list;
    // 请求到数据后如果当前页面仍存在且仍有数据即刷新原始数据
    if (mounted && resList.length > 0) {
      setState(() {
        if (isTopRefresh == true) {
          _dataList.insertAll(0, resList);
        } else {
          _dataList.addAll(resList);
        }
      });
      _updateIndex(res.total); // 加载完更新数据
    }
  }

  // 滚动列表底部元素
  Widget _buildListBottom(bool isNotRender) {
    return Offstage(
      offstage: isNotRender,
      child: Container(
        alignment: Alignment.center,
        // color: Colors.grey[100],
        height: 36,
        child: Text(
          "再怎么刷新也没有啦~",
          style: normalGrayStyle,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () => _loadMoreVideo(isTopRefresh: true),
      color: mainThemeColor,
      child: ListView.builder(
        itemCount: _dataList.length + 1,
        physics: AlwaysScrollableScrollPhysics(
            parent: BouncingScrollPhysics()), // 总是可以滚动
        itemBuilder: (_, int index) {
          // 判断是否到达渲染底部
          if (index == _dataList.length) {
            // 到达底部则先进行远程请求，根据数据是否增多判断隐藏服务端数据是否渲染完成
            _loadMoreVideo();
            return _buildListBottom(!_isRenderComplete);
          } else {
            return VideoRow(_dataList[index]);
          }
        },
      ),
    );
  }
}
